<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <el-header class="searchHeader">
        <el-form :model="headerSearchForm" label-width="auto" class="header-search-form">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="headerSearchForm.startTime"
              type="datetime"
              placeholder="开始时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="MMM DD, YYYY"
              time-format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="headerSearchForm.endTime"
              type="datetime"
              placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="MMM DD, YYYY"
              time-format="HH:mm"
            />
          </el-form-item>
          <el-form-item label="钢种">
            <el-input v-model="headerSearchForm.steelGrade" placeholder="请输入钢种" />
          </el-form-item>
          <el-form-item label="入口卷号">
            <el-input v-model="headerSearchForm.entId" placeholder="请输入入口卷号" />
          </el-form-item>
          <el-form-item label="出口卷号">
            <el-input v-model="headerSearchForm.extId" placeholder="请输入出口卷号" />
          </el-form-item>
        </el-form>
        <div class="header-buttons">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
          <el-button type="primary" @click="exportExcel()">导出</el-button>
        </div>
      </el-header>
      <el-main class="main-container">
        <div class="table-container">
          <div class="table-container-table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              @row-click="handleRowClick"
              v-loading="tableLoading"
            >
              <el-table-column prop="serialNumber" label="序号" fixed="left">
                <template #default="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="entId" label="入口卷号" min-width="160px" />
              <el-table-column prop="extId" label="出口卷号" min-width="160px" />
              <el-table-column prop="steelGrade" label="原料钢种" min-width="120px" />
              <el-table-column prop="steelGrade" label="成品钢种" min-width="120px" />
              <el-table-column label="入口规格" min-width="240px">
                <el-table-column prop="mwidth" label="宽度" />
                <el-table-column prop="mthick" label="厚度" />
              </el-table-column>
              <el-table-column label="出口规格" min-width="240px">
                <el-table-column prop="extWidth" label="宽度" />
                <el-table-column prop="extThich" label="厚度" />
              </el-table-column>
              <el-table-column prop="" label="综合判定" min-width="100px">
                <template #default="scope">
                  <span v-if="scope.row.comJudge === 3"><el-tag type="primary">OK</el-tag></span>
                  <span v-else><el-tag type="danger">NG</el-tag></span>
                </template>
              </el-table-column>
              <el-table-column prop="reason" label="原因分析" min-width="160px" />
              <el-table-column label="退火命中率">
                <el-table-column prop="p4HeartRate" label="P4">
                  <template #default="scope">
                    {{ (scope.row.p4HeartRate * 100).toFixed(2) + '%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="p5SoakRate" label="P5">
                  <template #default="scope">
                    {{ (scope.row.p5SoakRate * 100).toFixed(2) + '%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="p6ScsRate" label="P6">
                  <template #default="scope">
                    {{ (scope.row.p6ScsRate * 100).toFixed(2) + '%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="p8RscRate" label="P8">
                  <template #default="scope">
                    {{ (scope.row.p8RscRate * 100).toFixed(2) + '%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="p9FrRate" label="P9">
                  <template #default="scope">
                    {{ (scope.row.p9FrRate * 100).toFixed(2) + '%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="p10SnoutRate" label="P10">
                  <template #default="scope">
                    {{ (Number(scope.row.p10SnoutRate) * 100).toFixed(2) + '%' }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="160">
                <template #default="scope">
                  <el-button type="warning" @click="openDetail(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <div class="status-container">
          <div v-for="item in tableData" :key="item.extId" class="status-item" :style="steelcolor(item.comJudge)"></div>
        </div>
      </el-main>
      <el-footer class="footer">
        <div class="judge-container">
          <el-table
            :data="judgeTableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="judgeResult" label="判定结果" />
            <el-table-column prop="judgeContent" label="判定内容" />
            <el-table-column prop="scoringResult" label="评分结果" />
          </el-table>
        </div>
        <div class="judge-detail">
          <el-table
            :data="judgeTableData2"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="judgeResult" label="判定结果" />
            <el-table-column prop="rollsNo" label="卷数" />
            <el-table-column label="详细信息">
              <template #default="scope">
                <!-- TODO 下边表的详细按钮弹窗 -->
                <el-button type="warning" @click="judgeDialogVisible = true">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fastCoolTemGraph" v-loading="loading">
          <div class="chart-container" ref="chartRef"></div>
        </div>
      </el-footer>
    </el-container>
  </div>

  <el-dialog
    v-model="detailDialogVisible"
    :title="detailDialogTitle"
    :before-close="handleClose"
    ref="detailDialogRef"
    @closed="cancel"
    class="detailDialog"
  >
    <el-form :model="detailDialogFrom" label-width="auto" ref="dialogFormRef">
      <div class="scroll-content" style="height: 70vh">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-form-item label="入口卷号">
            <el-text>{{ detailDialogFrom?.entId }}</el-text>
          </el-form-item>
          <el-form-item label="出口卷号">
            <el-text>{{ detailDialogFrom?.extId }}</el-text>
          </el-form-item>
          <el-form-item label="入口钢种">
            <el-text>{{ detailDialogFrom?.steelGrade }}</el-text>
          </el-form-item>
          <el-form-item label="出口厚度">
            <el-text>{{ detailDialogFrom?.extThich }}</el-text>
          </el-form-item>
          <el-form-item label="出口宽度">
            <el-text>{{ detailDialogFrom?.extWidth }}</el-text>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-text>{{ detailDialogFrom?.createTime }}</el-text>
          </el-form-item>
          <el-form-item label="PP_FLAG">
            <el-text>{{ detailDialogFrom?.ppFlag }}</el-text>
          </el-form-item>
          <el-form-item label="退火曲线存在钢种">
            <el-text>{{ detailDialogFrom?.steelExit }}</el-text>
          </el-form-item>
          <el-form-item label="原因分析">
            <el-text>{{ detailDialogFrom?.reason }}</el-text>
          </el-form-item>
          <el-form-item label="速度最小值">
            <el-text>{{ detailDialogFrom?.linespeedMin }}</el-text>
          </el-form-item>
          <el-form-item label="速度最大值">
            <el-text>{{ detailDialogFrom?.linespeedMax }}</el-text>
          </el-form-item>
          <el-form-item label="P4设置最小值">
            <el-text>{{ detailDialogFrom?.p4setMin }}</el-text>
          </el-form-item>
          <el-form-item label="P4设置最大值">
            <el-text>{{ detailDialogFrom?.p4setMax }}</el-text>
          </el-form-item>
          <el-form-item label="P5设置最小值">
            <el-text>{{ detailDialogFrom?.p5setMin }}</el-text>
          </el-form-item>
          <el-form-item label="P5设置最大值">
            <el-text>{{ detailDialogFrom?.p5setMax }}</el-text>
          </el-form-item>
          <el-form-item label="P6设置最小值">
            <el-text>{{ detailDialogFrom?.p6setMin }}</el-text>
          </el-form-item>
          <el-form-item label="P6设置最大值">
            <el-text>{{ detailDialogFrom?.p6setMax }}</el-text>
          </el-form-item>
          <!-- <el-form-item label="P7设置最小值">
        <el-text>{{ detailDialogFrom?.p7setMin }}</el-text>
      </el-form-item>
      <el-form-item label="P7设置最大值">
        <el-text>{{ detailDialogFrom?.p7setMax }}</el-text>
      </el-form-item> -->
          <el-form-item label="P9设置最小值">
            <el-text>{{ detailDialogFrom?.p9setMin }}</el-text>
          </el-form-item>
          <el-form-item label="P9设置最大值">
            <el-text>{{ detailDialogFrom?.p9setMax }}</el-text>
          </el-form-item>
          <el-form-item label="P10设置最小值">
            <el-text>{{ detailDialogFrom?.p10setMin }}</el-text>
          </el-form-item>
          <el-form-item label="P10设置最大值">
            <el-text>{{ detailDialogFrom?.p10setMax }}</el-text>
          </el-form-item>
          <el-form-item label="P4退火命中率">
            <el-text>{{ detailDialogFrom?.p4HeartRate.toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="P5退火命中率">
            <el-text>{{ detailDialogFrom?.p5SoakRate.toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="P6退火命中率">
            <el-text>{{ detailDialogFrom?.p6ScsRate.toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="P8退火命中率">
            <el-text>{{ detailDialogFrom?.p8RscRate.toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="P9退火命中率">
            <el-text>{{ detailDialogFrom?.p9FrRate.toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="P10退火命中率">
            <el-text>{{ Number(detailDialogFrom?.p10SnoutRate).toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="实际设定命中率P4">
            <el-text>{{ detailDialogFrom?.p4hit.toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="实际设定命中率P5">
            <el-text>{{ detailDialogFrom?.p5hit.toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="实际设定命中率P6">
            <el-text>{{ detailDialogFrom?.p6hit.toFixed(2) + '%' }}</el-text>
          </el-form-item>
          <el-form-item label="入口宽度">
            <el-text>{{ detailDialogFrom?.mwidth }}</el-text>
          </el-form-item>
          <el-form-item label="入口厚度">
            <el-text>{{ detailDialogFrom?.mthick }}</el-text>
          </el-form-item>
          <el-form-item label="PDIFLAG">
            <el-text>{{ detailDialogFrom?.pdiflag }}</el-text>
          </el-form-item>
          <el-form-item label="入口厚度等级">
            <el-text>{{ detailDialogFrom?.enThkClass }}</el-text>
          </el-form-item>
          <el-form-item label="入口宽度等级">
            <el-text>{{ detailDialogFrom?.widClass }}</el-text>
          </el-form-item>
          <el-form-item label="速度头部等级">
            <el-text>{{ detailDialogFrom?.spdHClass }}</el-text>
          </el-form-item>
          <el-form-item label="速度中间等级">
            <el-text>{{ detailDialogFrom?.spdMClass }}</el-text>
          </el-form-item>
          <el-form-item label="速度尾部等级">
            <el-text>{{ detailDialogFrom?.spdTClass }}</el-text>
          </el-form-item>
        </el-scrollbar>
      </div>
    </el-form>
  </el-dialog>

  <el-dialog
    v-model="judgeDialogVisible"
    :title="judgeDialogTitle"
    :before-close="handleClose"
    ref="judgeDialogRef"
    @closed="cancel"
    class="judgeDialog"
  >
    <el-table
      :data="judgeDialogTableData"
      :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="extId" label="出口卷号" />
      <el-table-column prop="unqualifiedRate" label="不合格率">
        <template #default="scope">
          {{ (scope.row.unqualifiedRate * 100).toFixed(2) + '%' }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import * as echarts from 'echarts/core';
  import { BarChart, LineChart } from 'echarts/charts';
  import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent } from 'echarts/components';
  import { historyApi } from '/@/api/furnaceTempDynamicCtrl/history';
  import { CanvasRenderer } from 'echarts/renderers';

  echarts.use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, LineChart, CanvasRenderer, MarkLineComponent]);

  interface SearchForm {
    startTime: string;
    endTime: string;
    steelGrade: string;
    entId: string;
    extId: string;
    // filterAnomaliesOption: string;
  }

  interface TableData {
    entId: string; //入口卷号
    extId: string; //出口卷号
    steelGrade: string; //入口钢种
    extThich: number; //出口厚度
    extWidth: number; //出口宽度
    credate: string; // --
    ppFlag: number; //PP_FLAG --
    createTime: string; //创建时间 --
    steelExit: number; //退火曲线存在钢种
    linespeedMin: number; //速度最小值
    linespeedMax: number; //速度最大值
    p4setMin: number; //P4设置最小值
    p4setMax: number; //P4设置最大值
    p5setMin: number; //P5设置最小值
    p5setMax: number; //P5设置最大值
    p6setMin: number; //P6设置最小值
    p6setMax: number; //P6设置最大值
    p7setMin: number; //P7设置最小值
    p7setMax: number; //P7设置最大值
    p9setMin: number; //P9设置最小值
    p9setMax: number; //P9设置最大值
    p10setMin: number; //P10设置最小值
    p10setMax: number; // P10设置最大值
    p4HeartRate: number; //P4退火命中率
    p5SoakRate: number; //P5退火命中率
    p6ScsRate: number; //P6退火命中率
    p8RscRate: number; //P8退火命中率
    p9FrRate: number; //P9退火命中率
    p10SnoutRate: string; //P10退火命中率
    p4hit: number; //实际设定命中率P4
    p5hit: number; //实际设定命中率P5
    p6hit: number; //实际设定命中率P6
    mthick: number; //入口厚度
    mwidth: number; //入口宽度
    pdiflag: number; //PDIFLAG
    enThkClass: number; //入口厚度等级
    widClass: number; //入口宽度等级
    spdHClass: number; //速度头部等级
    spdMClass: number; //速度中间等级
    spdTClass: number; //速度尾部等级
    comJudge: number; //综合判定
    reason: string; //原因分析
  }

  const detailDialogVisible = ref(false);
  const judgeDialogVisible = ref(false);
  const detailDialogTitle = ref('详情');
  const judgeDialogTitle = ref('不合格卷信息');
  const detailDialogRef = ref<any>();
  const loading = ref(false);
  const tableLoading = ref(false);

  const steelcolor = (judge: number) => {
    if (judge == 3) return { backgroundColor: '#40a9ff' };
    return { backgroundColor: '#f56c6c' };
  };

  const headerSearchForm = reactive<SearchForm>({
    startTime: '',
    endTime: '',
    steelGrade: '',
    entId: '',
    extId: '',
    // filterAnomaliesOption: '',
  });

  const tableData = ref<TableData[]>([]);
  const judgeTableData = ref([
    {
      judgeResult: 'P4',
      judgeContent: '板温',
      scoringResult: '',
    },
    {
      judgeResult: 'P5',
      judgeContent: '板温',
      scoringResult: '',
    },
    {
      judgeResult: 'P6',
      judgeContent: '板温',
      scoringResult: '',
    },
  ]);
  const judgeTableData2 = ref([
    {
      judgeResult: 'P6',
      rollsNo: '',
      detail: '',
    },
  ]);
  const detailDialogFrom = ref<TableData>();
  const judgeDialogTableData = ref<any>([{ extId: '', unqualifiedRate: 0 }]);

  const chartRef = ref<HTMLElement | null>(null);
  let chartInstance: echarts.ECharts | null = null;
  const graphData = ref<number[]>([]);
  const graphDataX = ref<number[]>([]);

  // 分页数据
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: tableData.value.length,
  });

  const fetchTableData = async () => {
    const param = {
      page: {
        pageIndex: pagination.currentPage,
        pageSize: pagination.pageSize,
      },
      dto: headerSearchForm,
    };
    try {
      const res = await historyApi.getTableData(param);
      tableData.value = res.data.data;
      pagination.total = res.data.count;
      judgeTableData2.value[0].rollsNo =
        tableData.value.filter((item) => item.comJudge !== 3).length.toString() + '/' + tableData.value.length.toString();
      handleRowClick(tableData.value[0]);
      judgeDialogTableData.value = tableData.value.reduce<{ extId: string; unqualifiedRate: number }[]>((arr, item) => {
        if (item.p6ScsRate < 1) {
          arr.push({ extId: item.extId, unqualifiedRate: 1 - item.p6ScsRate });
        }
        return arr;
      }, []);
      tableLoading.value = false;
      // judgeTableData.value[0].scoringResult = tableData.value[0].p4hit.toString();
      // judgeTableData.value[1].scoringResult = tableData.value[0].p5hit.toString();
      // judgeTableData.value[2].scoringResult = tableData.value[0].p6hit.toString();

      // const response = await historyApi.getgraphData(graphParam);
      // graphData.value = response.data.data.curve[0].cgl_scs_strip_temp_act;
      // graphDataX.value = [...Array(response.data.data.curve[0].cgl_scs_strip_temp_act.length).keys()].map((i) => i + 1);
      // option.value.yAxis.min = Math.floor(Math.min(...(graphData.value ?? [0])) - 5);
      // option.value.yAxis.max = Math.floor(Math.max(...(graphData.value ?? [0])) + 5);
      // chartInstance?.setOption(option.value, true);
    } catch (error) {
      tableLoading.value = false;
      ElMessage.error('数据获取失败');
    }
  };

  // 查询方法
  const handleSearch = () => {
    pagination.currentPage = 1;
    fetchTableData();
  };

  // 重置方法
  const handleReset = () => {
    (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
      headerSearchForm[key] = '';
    });
    handleSearch();
  };

  // 行点击事件
  const handleRowClick = async (row: any) => {
    judgeTableData.value[0].scoringResult = row.p4hit.toString();
    judgeTableData.value[1].scoringResult = row.p5hit.toString();
    judgeTableData.value[2].scoringResult = row.p6hit.toString();
    loading.value = true;

    const graphParam = {
      line: 'CGL1870',
      extid: [row.extId],
      curve: ['cgl_scs_strip_temp_act'],
    };
    try {
      const response = await historyApi.getgraphData(graphParam);
      graphData.value = response.data.data.curve[0].cgl_scs_strip_temp_act;
      graphDataX.value = [...Array(response.data.data.curve[0].cgl_scs_strip_temp_act.length).keys()].map((i) => i + 1);
      updateCharts();
      loading.value = false;
    } catch (error) {
      loading.value = false;
      ElMessage.error('数据获取失败');
    }
  };

  const exportExcel = () => {};

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    pagination.pageSize = val;
    fetchTableData();
  };

  // 页码变化
  const handleCurrentChange = (val: number) => {
    pagination.currentPage = val;
    fetchTableData();
  };

  // 详情弹窗关闭事件
  const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done();
      })
      .catch(() => {
        // catch error
      });
  };

  // 详情弹窗取消事件
  const cancel = () => {
    detailDialogVisible.value = false;
    judgeDialogVisible.value = false;
  };

  // 详情弹窗
  const openDetail = (row: any) => {
    detailDialogVisible.value = true;
    detailDialogFrom.value = { ...row };
  };

  // const openJudge = () => {
  //   judgeDialogVisible.value = true;
  // };

  const option = computed(() => ({
    title: {
      text: '1870镀锌曲线',
      textStyle: {
        fontSize: 14,
      },
      left: 'center',
    },
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    // ADDED: Legend configuration
    legend: {
      data: ['缓冷温度'],
      right: '4%',
      top: '0%', // Position at the top
      textStyle: {
        color: '#c0c4cc',
        fontSize: 10,
      },
      itemWidth: 15,
      itemHeight: 10,
    },
    grid: { left: '3%', right: '4%', bottom: '5%', top: '15%', containLabel: true }, // Increased top margin
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: graphDataX.value,
      axisLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.5)' } },
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
    },
    yAxis: {
      type: 'value',
      min: 38,
      max: 47,
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
      splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
      axisLine: { show: false },
    },
    series: [
      {
        name: '缓冷温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: graphData.value,
        lineStyle: { color: '#00baff' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 186, 255, 0.6)' },
            { offset: 1, color: 'rgba(0, 186, 255, 0.1)' },
          ]),
        },
      },
    ],
  }));

  // --- 初始化图表 ---
  const initCharts = () => {
    try {
      if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance.setOption(option.value);
      }
    } catch (error) {
      console.error('图表初始化失败:', error);
    }
  };

  const resizeCharts = () => {
    chartInstance?.resize();
  };

  // --- 图表更新 ---
  const updateCharts = () => {
    option.value.xAxis.data = graphDataX.value;
    option.value.series[0].data = graphData.value;
    option.value.yAxis.min = Math.floor(Math.min(...(graphData.value ?? [0])) - 5);
    option.value.yAxis.max = Math.floor(Math.max(...(graphData.value ?? [0])) + 5);
    chartInstance?.setOption(option.value, true);
  };

  onMounted(() => {
    fetchTableData();
    // 延迟初始化图表，确保DOM已渲染
    nextTick(() => {
      setTimeout(initCharts, 100);
    });

    window.addEventListener('resize', resizeCharts);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', resizeCharts);
    chartInstance?.dispose();
  });
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  .common-layout {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fff;
    overflow: hidden;

    &.linear-gradient {
      background-image: linear-gradient(to top, white, @primary-color) !important;
    }
  }

  .searchHeader {
    width: 98%;
    margin-left: 1%;
    margin-top: 2vh;
    border-radius: @border-radius;
    height: 11vh;
    background-color: #fff;
    box-shadow: @box-shadow;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-search-form {
      height: 100%;
      width: 70%;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      gap: 20px;
    }
  }

  .main-container {
    height: 55vh;
    width: 98%;
    margin: 0.5% auto;
    background-color: #fff;
    box-shadow: @box-shadow;
    border-radius: @border-radius;
    display: flex;
    max-height: 55vh;
    position: relative;
    overflow: hidden;

    .table-container {
      width: 95%;
      height: 100%;
      overflow: hidden !important;

      .table-container-table {
        overflow: hidden;

        :deep(.el-table) {
          height: 400px;
          overflow: hidden;
          overflow-y: auto;
          width: 100%;
          z-index: 1;
        }
      }

      .pagination {
        margin-top: 2vh;
        display: flex;
        justify-content: flex-end;
        padding: 10px 0;
      }
    }

    .status-container {
      width: 4%;
      margin-left: 1%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;

      .status-item {
        flex: 1; /* 平均分配宽度 */
        height: 100%;
        transition: background-color 0.3s; /* 颜色过渡动画 */
      }
    }
  }

  .footer {
    width: 98%;
    height: 28vh;
    background-color: #fff;
    box-shadow: @box-shadow;
    border-radius: @border-radius;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 三等分 */
    gap: 1%; /* 元素间距 */
    margin: 0.5% auto;
  }

  .judge-container,
  .fastCoolTemGraph,
  .judge-detail {
    margin-top: 1%;
    height: 100%;
  }

  .fastCoolTemGraph {
    margin-top: 1%;
    height: 100%;
    .chart-container {
      width: 600px;
      height: 255px;
    }
  }

  .detailDialog {
    overflow: hidden !important;
    :deep(.el-dialog) {
      // max-height: 40vh !important; /* 强制限制对话框高度 */
      margin: 0 auto !important; /* 去除默认外边距 */
      height: 70%;
      overflow: hidden !important;
    }

    .el-dialog__body {
      position: absolute;
      left: 10;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      line-height: 30px;
      padding: 0 15px;
    }

    .el-form {
      margin-left: 40px;
    }
  }
</style>
